<template>
    <view>
        <!-- #ifdef MP-WEIXIN -->
        <view v-if="isCanUse">
            <view>
                <view class='header'>
                    <image src='../../static/wxavatar.png'></image>
                </view>
                <view class='content'>
                    <text>申请获取以下权限</text>
                    <text>获得你的公开信息(昵称，头像、地区等)</text>
                </view>

                <button class='bottom' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">
                    授权登录
                </button>			
            </view>
        </view>
        <!-- #endif -->
    </view>
</template>

<script>
    export default {
			data() {
				return {
					SessionKey: '',
					OpenId: '',
					nickName: null,
					avatarUrl: null,
					isCanUse: true
				};
			},
			onLoad() {
				
			},
			methods:{
				 wxGetUserInfo() {
						let _this = this;
						uni.showModal({
						    title: '授权操作',
						    content: '你确定要授权吗',
						    success: function (res) {
						        if (res.confirm) {
						            uni.getUserInfo({
						            	provider: 'weixin',
										lang:'zh_CN',
						            	success: function(infoRes) {
						            		let nickName = infoRes.userInfo.nickName; //昵称
						            		let avatarUrl = infoRes.userInfo.avatarUrl; //头像
						            		uni.setStorage({
						            		    key: 'userinfo',
						            		    data: infoRes.userInfo,
												success(res) {
													console.log(res,'=====')
												} 
						            		});
											_this.isCanUse = false
											 _this.$emit('userClick',_this.isCanUse)
						            	},
						            	fail(res) {}
						            });
						        } else if (res.cancel) {
									 _this.$emit('userClick',_this.isCanUse)
						            console.log('用户点击取消');
						        }
						    }
						});
					},
					test(){
						uni.getStorage({
						    key: 'userinfo',
						    success: function (res) {
						        console.log(res.data);//set存储的值
						    }
						});
					}
			}
		}
</script>

<style scoped lang="scss">
    .header {
        margin: 90rpx 0 90rpx 50rpx;
        border-bottom: 1px solid #ccc;
        text-align: center;
        width: 650rpx;
        height: 300rpx;
        line-height: 450rpx;
    }

    .header image {
        width: 200rpx;
        height: 200rpx;
    }

    .content {
		margin-bottom: 90rpx;
    }

    .content text {
        display: block;
        color: #9d9d9d;
        margin-top: 40rpx;
		margin-left:55rpx;
    }

    .bottom {
        border-radius: 80rpx;
        margin: 70rpx 50rpx;
        font-size: 35rpx;
		margin-bottom: 300rpx;
    }
</style>
